<!--楼宇设备-->
<template>
  <div class="mainSon">
    <div class="peopleMain">
      <!--头部-->

      <!--        <div class="mainUpStyleImgGoBack" @click="goBack()"/>-->
      <basic-layout title="资产列表" :showAddBtn="false" :showFilterBtn="false"
                    @handleFilter="$refs.queryPopupRef.show = true">
        <div class="mainUpStyle">
          <div class="topRightImgStyle" @click="openPopup"/>
          <div class="topTextStyle">
            <div><span>当前发放:&nbsp;</span><span>{{ this.dataInfo.pinm }}</span></div>
            <div><span>需求数量:&nbsp;</span><span>{{ this.dataInfo.num }}</span></div>
            <div><span>已发数量:&nbsp;</span><span>{{ this.dataInfo.releasedNum }}</span></div>
          </div>
          <div class="topTypeStyle">
            <span>类别:&nbsp;</span><span>{{ this.dataInfo.dal }}/{{ this.dataInfo.xiaol }}</span>
          </div>
        </div>
        <!--      </div>-->

        <!--数据-->
        <van-row class="listCard">
          <van-pull-refresh
            v-if="dataList.length"
            class="cardVanPullRefreshOne"
            v-model="refreshing"
            @refresh="onRefresh">
            <van-list
              v-if="dataList.length > 0"
              v-model="loading"
              :finished="finished"
              finished-text="已经到底啦!"
              @load="nextPage"
            >
              <div v-for="item in dataList" class="dataStyleOne" @click="checkPeople(item)">
                <!--上面数据-->
                <div class="upMainStyleOne" v-if="item.SWID">
                  <div class="textMainStyleOne">
                    <div>
                      <div class="dataAStyle">
                        <div class="dataAAStyle">
                          <span>{{ item.SWID }}</span>
                        </div>
                      </div>
                      <div v-if="item.PINM" class="pinmOne">
                        <div class="dataBStyle">
                          <div class="dataBBStyle">
                            <div class="dataImgStyle imgADataStyle"/>
                            <div class="van-ellipsis dataBBTextStyle">
                              <span class="span-text">{{ item.PINM }}</span>
                            </div>
                          </div>
                        </div>

                        <div v-if="item.XINGH" class="dataBStyle dataTopStyle">
                          <div class="dataBBStyle">
                            <div class="dataImgStyle imgBDataStyle"/>
                            <div class="van-ellipsis dataBBTextStyle">
                              <span class="span-text">{{ item.XINGH }}</span>
                            </div>
                          </div>
                        </div>


                        <div v-if="item.GYSMC" class="dataBStyle dataTopStyle">
                          <div class="dataBBStyle">
                            <div class="dataImgStyle imgDDataStyle"/>
                            <div class="van-ellipsis dataBBTextStyle">
                              <span class="span-text">{{ item.GYSMC }}</span>
                            </div>
                          </div>
                        </div>

                        <div v-if="item.SHENGCCJ" class="dataBStyle dataTopStyle">
                          <div class="dataBBStyle">
                            <div class="dataImgStyle imgEDataStyle"/>
                            <div class="van-ellipsis dataBBTextStyle">
                              <span class="span-text">{{ item.SHENGCCJ }}</span>
                            </div>
                          </div>
                        </div>

                        <div v-if="item.DAL || item.XIAOL" class="dataBStyle dataTopStyle">
                          <div class="dataBBStyle">
                            <div class="dataImgStyle imgFDataStyle"/>
                            <div class="van-ellipsis dataBBTextStyle">
                              <span class="span-text">{{ item.DAL }}/{{ item.XIAOL }}</span>
                            </div>
                          </div>
                        </div>


                        <div v-if="item.RUKSJ" style="width: 100%">
                          <div class="dataBStyle dataTopStyle" style="float: left;width: 50%">
                            <div class="dataBBStyle">
                              <div class="dataImgStyle imgGDataStyle"/>
                              <div class="van-ellipsis dataBBTextStyle">
                                <span class="span-text">{{ item.RUKSJ }}</span>
                              </div>
                            </div>
                          </div>
                          <div v-if="item.SHIYQX" class="dataBStyle dataTopStyle" style="float: right;width: 50%;">
                            <div class="dataBBStyle">
                              <div class="dataImgStyle imgHDataStyle"/>
                              <div class="van-ellipsis dataBBTextStyle">
                                <span class="span-text">{{ item.SHIYQX }}</span>
                              </div>
                            </div>
                          </div>
                        </div>


                        <div v-if="item.DANJ" style="width: 100%">
                          <div class="dataBStyle dataTopStyle" style="width: 50%;float: left">
                            <div class="dataBBStyle">
                              <div class="dataImgStyle imgIDataStyle"/>
                              <div class="van-ellipsis dataBBTextStyle">
                                <span class="span-text">{{ item.DANJ }}</span>
                              </div>
                            </div>
                          </div>
                          <div v-if="item.DANW" class="dataBStyle dataTopStyle" style="width: 50%;float: right">
                            <div class="dataBBStyle">
                              <div class="dataImgStyle imgJDataStyle"/>
                              <div class="van-ellipsis dataBBTextStyle">
                                <span class="span-text">{{ item.DANW }}</span>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>


                <div class="upMainStyleTwo" v-else>
                  <div class="textMainStyleTwo">
                    <div>
                      <div class="dataBStyle">
                        <div class="dataBBStyle">
                          <!--                        <div class="dataImgStyle imgADataStyle"/>-->
                          <div class="van-ellipsis dataBBTextStyle">
                            <span class="span-text">{{ item.PINM }}</span>
                          </div>
                        </div>
                      </div>

                      <div v-if="item.XINGH" class="dataBStyle dataTopStyle">
                        <div class="dataBBStyle">
                          <div class="van-ellipsis dataBBTextStyle">
                            <span class="span-text">{{ item.XINGH }}</span>
                          </div>
                        </div>
                      </div>


                      <div v-if="item.GYSMC" class="dataBStyle dataTopStyle">
                        <div class="dataBBStyle">
                          <div class="van-ellipsis dataBBTextStyle">
                            <span class="span-text">{{ item.GYSMC }}</span>
                          </div>
                        </div>
                      </div>

                      <div v-if="item.SHENGCCJ" class="dataBStyle dataTopStyle">
                        <div class="dataBBStyle">
                          <div class="van-ellipsis dataBBTextStyle">
                            <span class="span-text">{{ item.SHENGCCJ }}</span>
                          </div>
                        </div>
                      </div>

                      <div v-if="item.DAL || item.XIAOL" class="dataBStyle dataTopStyle">
                        <div class="dataBBStyle">
                          <div class="van-ellipsis dataBBTextStyle">
                            <span class="span-text">{{ item.DAL }}/{{ item.XIAOL }}</span>
                          </div>
                        </div>
                      </div>


                      <div v-if="item.RUKSJ" style="width: 100%">
                        <div class="dataBStyle dataTopStyle" style="float: left;width: 50%">
                          <div class="dataBBStyle">
                            <div class="van-ellipsis dataBBTextStyle">
                              <span class="span-text">{{ item.RUKSJ }}</span>
                            </div>
                          </div>
                        </div>
                        <div v-if="item.SHIYQX" class="dataBStyle dataTopStyle" style="float: right;width: 50%;">
                          <div class="dataBBStyle">
                            <div class="van-ellipsis dataBBTextStyle">
                              <span class="span-text">{{ item.SHIYQX }}</span>
                            </div>
                          </div>
                        </div>
                      </div>


                      <div v-if="item.DANJ" style="width: 100%">
                        <div class="dataBStyle dataTopStyle" style="width: 50%;float: left">
                          <div class="dataBBStyle">
                            <div class="van-ellipsis dataBBTextStyle">
                              <span class="span-text">{{ item.DANJ }}</span>
                            </div>
                          </div>
                        </div>
                        <div v-if="item.DANW" class="dataBStyle dataTopStyle" style="width: 50%;float: right">
                          <div class="dataBBStyle">
                            <div class="van-ellipsis dataBBTextStyle">
                              <span class="span-text">{{ item.DANW }}</span>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </van-list>
          </van-pull-refresh>

          <van-pull-refresh
            v-else
            class="cardVanPullRefresh2"
            v-model="refreshing"
            @refresh="onRefresh">
            <van-empty
              class="custom-image"
              :image="require('../../../assets/images/nx/icon_common_empty.png')"
              description="暂无数据"/>
          </van-pull-refresh>
        </van-row>

      </basic-layout>
    </div>


    <van-popup
      v-model:show="show"
      position="right"
      class="rightBar"
      :style="{ height: '100%', width: '90%' }">
      <div class="mainPopupStyle">
        <div class="typeStyle">
          <div class="typeStyleA"></div>
          <div class="typeStyleB">
            <span>已发放物资</span>
          </div>
        </div>
      </div>

      <div class="popupStyle">
        <van-row class="listCardPopup">
          <van-pull-refresh
            v-if="dataListPopup.length"
            class="cardVanPullRefreshThree"
            v-model="refreshingPopup"
            @refresh="onRefreshPopup">
            <van-list
              v-if="dataListPopup.length > 0"
              v-model="loadingPopup"
              :finished="finishedPopup"
              finished-text="已经到底啦!"
              @load="nextPagePopup"
            >
              <div v-for="item in dataListPopup" class="dataStyleThree">
                <!--上面数据-->
                <div class="upMainStyleThree" v-if="item.swid">
                  <div class="textMainStyleThree">
                    <div>
                      <div class="dataAStyle">
                        <div class="dataAAStyle">
                          <span>{{ item.swid }}</span>
                        </div>
                      </div>
                      <div v-if="item.pinm" clas="pinmThree" style="padding: 0px 15px 15px 15px;">
                        <div class="dataBStyle">
                          <div class="dataBBStyle">
                            <div class="dataImgStyle imgADataStyle"/>
                            <div class="van-ellipsis dataBBTextStyle">
                              <span class="span-text">{{ item.pinm }}</span>
                            </div>
                          </div>
                        </div>

                        <div v-if="item.xingh" class="dataBStyle dataTopStyle">
                          <div class="dataBBStyle">
                            <div class="dataImgStyle imgBDataStyle"/>
                            <div class="van-ellipsis dataBBTextStyle">
                              <span class="span-text">{{ item.xingh }}</span>
                            </div>
                          </div>
                        </div>


                        <div v-if="item.gysmc" class="dataBStyle dataTopStyle">
                          <div class="dataBBStyle">
                            <div class="dataImgStyle imgDDataStyle"/>
                            <div class="van-ellipsis dataBBTextStyle">
                              <span class="span-text">{{ item.gysmc }}</span>
                            </div>
                          </div>
                        </div>

                        <div v-if="item.shengccj" class="dataBStyle dataTopStyle">
                          <div class="dataBBStyle">
                            <div class="dataImgStyle imgEDataStyle"/>
                            <div class="van-ellipsis dataBBTextStyle">
                              <span class="span-text">{{ item.shengccj }}</span>
                            </div>
                          </div>
                        </div>

                        <div v-if="item.dal || item.xiaol" class="dataBStyle dataTopStyle">
                          <div class="dataBBStyle">
                            <div class="dataImgStyle imgFDataStyle"/>
                            <div class="van-ellipsis dataBBTextStyle">
                              <span class="span-text">{{ item.dal }}/{{ item.xiaol }}</span>
                            </div>
                          </div>
                        </div>


                        <div v-if="item.rukrq" class="dataBStyle dataTopStyle">
                          <div class="dataBStyle dataTopStyle">
                            <div class="dataBBStyle">
                              <div class="dataImgStyle imgGDataStyle"/>
                              <div class="van-ellipsis dataBBTextStyle">
                                <span class="span-text">{{ item.rukrq }}</span>
                              </div>
                            </div>
                          </div>
                          <div v-if="item.shiyqx" class="dataBStyle dataTopStyle" style="float: right;width: 50%;">
                            <div class="dataBBStyle">
                              <div class="dataImgStyle imgHDataStyle"/>
                              <div class="van-ellipsis dataBBTextStyle">
                                <span class="span-text">{{ item.shiyqx }}</span>
                              </div>
                            </div>
                          </div>
                        </div>


                        <div v-if="item.danj" class="dataBStyle dataTopStyle">
                          <div class="dataBStyle dataTopStyle">
                            <div class="dataBBStyle">
                              <div class="dataImgStyle imgIDataStyle"/>
                              <div class="van-ellipsis dataBBTextStyle">
                                <span class="span-text">{{ item.danj }}</span>
                              </div>
                            </div>
                          </div>
                          <div v-if="item.danw" class="dataBStyle dataTopStyle" style="width: 50%;float: right">
                            <div class="dataBBStyle">
                              <div class="dataImgStyle imgJDataStyle"/>
                              <div class="van-ellipsis dataBBTextStyle">
                                <span class="span-text">{{ item.danw }}</span>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>


                <div class="upMainStyleFour" v-else>
                  <div class="textMainStyleFour">
                    <div>
                      <div class="dataBStyle">
                        <div class="dataBBStyle">
                          <div class="dataImgStyle imgADataStyle"/>
                          <div class="van-ellipsis dataBBTextStyle">
                            <span class="span-text">{{ item.pinm }}</span>
                          </div>
                        </div>
                      </div>

                      <div v-if="item.xingh" class="dataBStyle dataTopStyle">
                        <div class="dataBBStyle">
                          <div class="dataImgStyle imgBDataStyle"/>
                          <div class="van-ellipsis dataBBTextStyle">
                            <span class="span-text">{{ item.xingh }}</span>
                          </div>
                        </div>
                      </div>


                      <div v-if="item.GYSMC" class="dataBStyle dataTopStyle">
                        <div class="dataBBStyle">
                          <div class="dataImgStyle imgDDataStyle"/>
                          <div class="van-ellipsis dataBBTextStyle">
                            <span class="span-text">{{ item.GYSMC }}</span>
                          </div>
                        </div>
                      </div>

                      <div v-if="item.shengccj" class="dataBStyle dataTopStyle">
                        <div class="dataBBStyle">
                          <div class="dataImgStyle imgEDataStyle"/>
                          <div class="van-ellipsis dataBBTextStyle">
                            <span class="span-text">{{ item.shengccj }}</span>
                          </div>
                        </div>
                      </div>

                      <div v-if="item.dal || item.xiaol" class="dataBStyle dataTopStyle">
                        <div class="dataBBStyle">
                          <div class="dataImgStyle imgFDataStyle"/>
                          <div class="van-ellipsis dataBBTextStyle">
                            <span class="span-text">{{ item.dal }}/{{ item.xiaol }}</span>
                          </div>
                        </div>
                      </div>


                      <div v-if="item.ruksj" style="width: 100%">
                        <div class="dataBStyle dataTopStyle" style="float: left;width: 50%">
                          <div class="dataBBStyle">
                            <div class="dataImgStyle imgGDataStyle"/>
                            <div class="van-ellipsis dataBBTextStyle">
                              <span class="span-text">{{ item.ruksj }}</span>
                            </div>
                          </div>
                        </div>
                        <div v-if="item.shiyqx" class="dataBStyle dataTopStyle" style="float: right;width: 50%;">
                          <div class="dataBBStyle">
                            <div class="dataImgStyle imgHDataStyle"/>
                            <div class="van-ellipsis dataBBTextStyle">
                              <span class="span-text">{{ item.shiyqx }}</span>
                            </div>
                          </div>
                        </div>
                      </div>


                      <div v-if="item.danj" style="width: 100%">
                        <div class="dataBStyle dataTopStyle" style="width: 50%;float: left">
                          <div class="dataBBStyle">
                            <div class="dataImgStyle imgIDataStyle"/>
                            <div class="van-ellipsis dataBBTextStyle">
                              <span class="span-text">{{ item.danj }}</span>
                            </div>
                          </div>
                        </div>
                        <div v-if="item.danw" class="dataBStyle dataTopStyle" style="width: 50%;float: right">
                          <div class="dataBBStyle">
                            <div class="dataImgStyle imgJDataStyle"/>
                            <div class="van-ellipsis dataBBTextStyle">
                              <span class="span-text">{{ item.danw }}</span>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </van-list>
          </van-pull-refresh>

          <van-pull-refresh
            v-else
            class="cardVanPullRefresh22"
            v-model="refreshingPopup"
            @refresh="onRefreshPopup">
            <van-empty
              class="custom-image"
              :image="require('../../../assets/images/nx/icon_common_empty.png')"
              description="暂无数据"/>
          </van-pull-refresh>
        </van-row>
      </div>

    </van-popup>
  </div>

</template>
<script>
import { queryFfsb, updateStatus, queryYffsb, queryXlwuzz } from '@/api/srvAssurance/assetLabel/assetLabel'

export default {
  name: 'distributionSearch',
  components: {},

  data () {
    return {
      show: false,

      inputSearchValue: '',

      loading: false,
      finished: false,
      refreshing: false,

      loadingPopup: false,
      finishedPopup: false,
      refreshingPopup: false,

      dataList: [],
      dataListPopup: [],

      dataInfo: {
        pinm: null,
        num: null,
        releasedNum: null,
        dal: null,
        xiaol: null,
      },

      queryParam: {
        releasePlanId: '',
        type: '',
        xiaol: '',
        keyword: null,
        pageIndex: 1,
        pageSize: 10,
      },

      queryParamPopup: {
        releasePlanId: '',
        type: '',
        pageIndex: 1,
        pageSize: 10,
      },
    }
  },

  created () {
    let dataInfo = this.$route.query.dataInfo
    let param = this.$route.query.param

    this.queryParam.type = param.type || ''
    this.queryParam.xiaol = dataInfo.xiaolid || ''
    this.queryParam.keyword = dataInfo.pinm || null

    this.queryParamPopup.type = param.type || ''
    this.queryParamPopup.releasePlanId = param.releasePlanId || ''
    this.inputSearchValue = dataInfo.pinm || null
    this.dataInfo = dataInfo
    this.initData()
  },

  methods: {
    searchHandle () {
      this.dataList = []
      this.initData()
    },

    onRefresh () {
      this.initData()
    },

    async initData () {
      this.queryParam.pageIndex = 1
      this.finished = false
      this.refreshing = true
      await this.getDataList()
      this.refreshing = false
    },

    // 加载下一页
    nextPage () {
      // 判断第一次查出来的数据是否还有下一页数据，如果没有则不调接口
      if (this.dataList.length < (this.queryParam.pageIndex * this.queryParam.pageSize)) {
        this.finished = true
        return
      }
      setTimeout(() => {
        this.queryParam.pageIndex += 1
        this.getDataList()
      }, 1000)
    },

    async getDataList () {
      this.loading = true
      this.queryParam.keyword = this.inputSearchValue
      let res = await queryXlwuzz(this.queryParam)
      if (res.status == 0) {
        if (this.queryParam.pageIndex == 1) {
          // 清空列表数据
          this.dataList = []
        }
        this.dataList = this.dataList.concat(res.data)
        // 如果数据加载完毕，finished 标志位置为 true，滑到页面底部则不会再触发 nextPage() 方法了。
        if (this.dataList.length >= res.totalCount) {
          this.finished = true
        }
      }
      this.loading = false
    },

    checkPeople (item) {
      let _this = this
      let data = {
        releasePlanId: this.dataInfo.id,
        wzid: item.WUZID,
        barcode: '',
        type: this.queryParam.type,
      }
      wx.scanQRCode({
        desc: 'scanQRCode desc',
        needResult: 1, // 默认为0，扫描结果由i国网处理，1则直接返回扫描结果，
        scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码，默认二者都有
        success: function (res) {
          if (res.resultStr) {
            data.barcode = res.resultStr
            updateStatus(data).then(async res => {
              if (res.status == 0) {
                _this.initData()
                _this.initPopup()
                let res = await queryFfsb(_this.queryParamPopup)
                if (res.status == 0) {
                  if (res.data != []) {
                    let item = res.data[0]
                    _this.dataInfo = item
                  }
                }
              } else {
                _this.$toast(res.message)
              }
            })
          }
        },
        error: function (res) {
          if (res.errMsg.indexOf('function_not_exist') > 0) {
            alert('版本过低请升级')
          }
        }
      })
    },

    goBack () {
      this.$router.back()
    },

    openPopup () {
      this.show = true
      this.initPopup()
    },

    onRefreshPopup () {
      this.initPopup()
    },

    async initPopup () {
      this.queryParamPopup.pageIndex = 1
      this.queryParamPopup.releasePlanId = this.dataInfo.id
      this.finishedPopup = false
      this.refreshingPopup = true
      await this.getDataListPopup()
      this.refreshingPopup = false
    },

    async getDataListPopup () {
      this.loadingPopup = true
      let res = await queryYffsb(this.queryParamPopup)
      if (res.status == 0) {
        if (this.queryParamPopup.pageIndex == 1) {
          // 清空列表数据
          this.dataListPopup = []
        }
        this.dataListPopup = this.dataListPopup.concat(res.data)
        // 如果数据加载完毕，finished 标志位置为 true，滑到页面底部则不会再触发 nextPage() 方法了。
        if (this.dataListPopup.length >= res.totalCount) {
          this.finishedPopup = true
        }
      }
      this.loadingPopup = false
    },

    // 加载下一页
    nextPagePopup () {
      // 判断第一次查出来的数据是否还有下一页数据，如果没有则不调接口
      if (this.dataListPopup.length < (this.queryParamPopup.pageIndex * this.queryParamPopup.pageSize)) {
        this.finishedPopup = true
        return
      }
      setTimeout(() => {
        this.queryParamPopup.pageIndex += 1
        this.getDataListPopup()
      }, 1000)
    },

  }
}
</script>

<style scoped lang="less">
.mainSon {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 15;
  background: #fff;

  .peopleMain {
    height: 100%;
    background-color: #80808017;

    .mainUpStyle {
      height: auto;
      background-color: #FFFFFF;

      .upStyle {
        float: left;
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;

        span {
          color: red;
          font-size: 20px;
          font-weight: 500;
        }
      }

      .topRightImgStyle {
        position: absolute;
        width: 20px;
        height: 20px;
        margin-left: 88%;
        margin-top: 15px;
        background: url('../../../assets/images/nx/icon_goods_released.png') no-repeat;
        background-size: 100% 100%;
      }


      .topTextStyle {
        display: flex;
        justify-content: space-between;
        padding: 0px 30px;
        //font-size: 10px;
        color: black;
      }

      .topTypeStyle {
        padding: 0px 30px;
        //font-size: 10px;
        color: black;
      }

      .upSearchStyle {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        .searchMainStyle {
          background-color: transparent;
          width: 80%;
          padding: 10px;

          /deep/ .van-search__content {
            border-radius: 10px;
          }
        }

        .upSearchImgStyle {
          width: 7%;
          height: 30px;
          background: url('../../../assets/images/nx/icon_search.png') no-repeat;
          background-size: 100% 100%;
        }
      }
    }


    .listCard {
      height: calc(100% - 140px);
      width: 100%;
      z-index: 999;
      overflow: auto;
      justify-content: flex-start;
      align-items: center;

      .cardVanPullRefreshOne {
        min-height: 100%;


        .dataStyleOne {
          height: auto;
          background-color: #FFFFFF;

          .upMainStyleOne {
            .textMainStyleOne {
              height: 100%;

              .pinmOne {
                padding: 0px 15px 15px 15px;
                width: 100%;
                display: flex;
                flex-direction: column;


                .dataBStyle {
                  //padding: 0px 15px 0px 15px;
                  height: 20px;

                  .dataBBStyle {
                    //margin-left: 15px;
                    height: 100%;

                    .dataImgStyle {
                      float: left;
                      height: 19px;
                      width: 15px;
                      text-align: center;
                    }

                    .imgADataStyle {
                      background: url('../../../assets/images/nx/icon_device_name.png') no-repeat;
                      background-size: 100% 100%;
                    }

                    .imgBDataStyle {
                      background: url('../../../assets/images/nx/icon_device_model.png') no-repeat;
                      background-size: 100% 100%;
                    }

                    .imgCDataStyle {
                      background: url('../../../assets/images/nx/icon_device_location.png') no-repeat;
                      background-size: 100% 100%;
                    }


                    .imgDDataStyle {
                      background: url('../../../assets/images/nx/icon_provider.png') no-repeat;
                      background-size: 100% 100%;
                    }

                    .imgEDataStyle {
                      background: url('../../../assets/images/nx/icon_company.png') no-repeat;
                      background-size: 100% 100%;
                    }

                    .imgFDataStyle {
                      background: url('../../../assets/images/nx/icon_device_category.png') no-repeat;
                      background-size: 100% 100%;
                    }

                    .imgGDataStyle {
                      background: url('../../../assets/images/nx/icon_plan_time.png') no-repeat;
                      background-size: 100% 100%;
                    }

                    .imgHDataStyle {
                      background: url('../../../assets/images/nx/icon_time_line.png') no-repeat;
                      background-size: 100% 100%;
                    }

                    .imgIDataStyle {
                      background: url('../../../assets/images/nx/icon_money.png') no-repeat;
                      background-size: 100% 100%;
                    }

                    .imgJDataStyle {
                      background: url('../../../assets/images/nx/icon_unit.png') no-repeat;
                      background-size: 100% 100%;
                    }

                    .dataBBTextStyle {
                      height: 20px;
                      line-height: 20px;

                      .span-text {
                        margin-left: 8px;
                      }
                    }
                  }

                  .tagStyle {
                    padding: 2px 4px;
                    border-radius: 5px;
                  }

                  .tagLeft {
                    color: blue !important;
                  }

                  .tagRight {
                    color: orange !important;
                  }
                }
              }

              .dataAStyle {
                width: 100%;
                height: 40px;
                display: flex;
                align-items: center;

                .dataAAStyle {
                  border-top-right-radius: 10px;
                  border-bottom-right-radius: 10px;
                  height: 25px;
                  line-height: 25px;
                  background-color: rgba(128, 128, 128, 0.23);
                  width: auto;

                  span {
                    margin-left: 15px;
                    margin-right: 15px;
                  }
                }
              }

              .dataBStyle {
                //padding: 0px 15px 0px 15px;
                height: 20px;

                .dataBBStyle {
                  //margin-left: 15px;
                  height: 100%;

                  .dataImgStyle {
                    float: left;
                    height: 19px;
                    width: 15px;
                    text-align: center;
                  }

                  .imgADataStyle {
                    background: url('../../../assets/images/nx/icon_device_name.png') no-repeat;
                    background-size: 100% 100%;
                  }

                  .imgBDataStyle {
                    background: url('../../../assets/images/nx/icon_device_model.png') no-repeat;
                    background-size: 100% 100%;
                  }

                  .imgCDataStyle {
                    background: url('../../../assets/images/nx/icon_device_location.png') no-repeat;
                    background-size: 100% 100%;
                  }


                  .imgDDataStyle {
                    background: url('../../../assets/images/nx/icon_provider.png') no-repeat;
                    background-size: 100% 100%;
                  }

                  .imgEDataStyle {
                    background: url('../../../assets/images/nx/icon_company.png') no-repeat;
                    background-size: 100% 100%;
                  }

                  .imgFDataStyle {
                    background: url('../../../assets/images/nx/icon_device_category.png') no-repeat;
                    background-size: 100% 100%;
                  }

                  .imgGDataStyle {
                    background: url('../../../assets/images/nx/icon_plan_time.png') no-repeat;
                    background-size: 100% 100%;
                  }

                  .imgHDataStyle {
                    background: url('../../../assets/images/nx/icon_time_line.png') no-repeat;
                    background-size: 100% 100%;
                  }

                  .imgIDataStyle {
                    background: url('../../../assets/images/nx/icon_money.png') no-repeat;
                    background-size: 100% 100%;
                  }

                  .imgJDataStyle {
                    background: url('../../../assets/images/nx/icon_unit.png') no-repeat;
                    background-size: 100% 100%;
                  }

                  .dataBBTextStyle {
                    height: 20px;
                    line-height: 20px;

                    .span-text {
                      margin-left: 8px;
                    }
                  }
                }

                .tagStyle {
                  padding: 2px 4px;
                  border-radius: 5px;
                }

                .tagLeft {
                  color: blue !important;
                }

                .tagRight {
                  color: orange !important;
                }
              }

              .dataTopStyle {
                margin-top: 7px;
              }

              .dataLeftStyle {
                margin-left: 38px;
              }
            }


          }


          .upMainStyleTwo {
            padding: 15px;
            display: flex;
            flex-direction: column;

            .textMainStyleTwo {
              height: 100%;

              .dataBStyle {
                //padding: 0px 15px 0px 15px;
                height: 20px;

                .dataBBStyle {
                  //margin-left: 15px;
                  height: 100%;

                  .dataImgStyle {
                    float: left;
                    height: 19px;
                    width: 15px;
                    text-align: center;
                  }

                  .imgADataStyle {
                    background: url('../../../assets/images/nx/icon_device_name.png') no-repeat;
                    background-size: 100% 100%;
                  }

                  .imgBDataStyle {
                    background: url('../../../assets/images/nx/icon_device_model.png') no-repeat;
                    background-size: 100% 100%;
                  }

                  .imgCDataStyle {
                    background: url('../../../assets/images/nx/icon_device_location.png') no-repeat;
                    background-size: 100% 100%;
                  }


                  .imgDDataStyle {
                    background: url('../../../assets/images/nx/icon_provider.png') no-repeat;
                    background-size: 100% 100%;
                  }

                  .imgEDataStyle {
                    background: url('../../../assets/images/nx/icon_company.png') no-repeat;
                    background-size: 100% 100%;
                  }

                  .imgFDataStyle {
                    background: url('../../../assets/images/nx/icon_device_category.png') no-repeat;
                    background-size: 100% 100%;
                  }

                  .imgGDataStyle {
                    background: url('../../../assets/images/nx/icon_plan_time.png') no-repeat;
                    background-size: 100% 100%;
                  }

                  .imgHDataStyle {
                    background: url('../../../assets/images/nx/icon_time_line.png') no-repeat;
                    background-size: 100% 100%;
                  }

                  .imgIDataStyle {
                    background: url('../../../assets/images/nx/icon_money.png') no-repeat;
                    background-size: 100% 100%;
                  }

                  .imgJDataStyle {
                    background: url('../../../assets/images/nx/icon_unit.png') no-repeat;
                    background-size: 100% 100%;
                  }

                  .dataBBTextStyle {
                    height: 20px;
                    line-height: 20px;

                    .span-text {
                      margin-left: 8px;
                    }
                  }
                }

                .tagStyle {
                  padding: 2px 4px;
                  border-radius: 5px;
                }

                .tagLeft {
                  color: blue !important;
                }

                .tagRight {
                  color: orange !important;
                }
              }

              .dataAStyle {
                width: 100%;
                height: 40px;
                display: flex;
                align-items: center;

                .dataAAStyle {
                  border-top-right-radius: 10px;
                  border-bottom-right-radius: 10px;
                  height: 25px;
                  line-height: 25px;
                  background-color: rgba(128, 128, 128, 0.23);
                  width: auto;

                  span {
                    margin-left: 15px;
                    margin-right: 15px;
                  }
                }
              }

              .dataBStyle {
                //padding: 0px 15px 0px 15px;
                height: 20px;

                .dataBBStyle {
                  //margin-left: 15px;
                  height: 100%;

                  .dataImgStyle {
                    float: left;
                    height: 19px;
                    width: 15px;
                    text-align: center;
                  }

                  .imgADataStyle {
                    background: url('../../../assets/images/nx/icon_device_name.png') no-repeat;
                    background-size: 100% 100%;
                  }

                  .imgBDataStyle {
                    background: url('../../../assets/images/nx/icon_device_model.png') no-repeat;
                    background-size: 100% 100%;
                  }

                  .imgCDataStyle {
                    background: url('../../../assets/images/nx/icon_device_location.png') no-repeat;
                    background-size: 100% 100%;
                  }


                  .imgDDataStyle {
                    background: url('../../../assets/images/nx/icon_provider.png') no-repeat;
                    background-size: 100% 100%;
                  }

                  .imgEDataStyle {
                    background: url('../../../assets/images/nx/icon_company.png') no-repeat;
                    background-size: 100% 100%;
                  }

                  .imgFDataStyle {
                    background: url('../../../assets/images/nx/icon_device_category.png') no-repeat;
                    background-size: 100% 100%;
                  }

                  .imgGDataStyle {
                    background: url('../../../assets/images/nx/icon_plan_time.png') no-repeat;
                    background-size: 100% 100%;
                  }

                  .imgHDataStyle {
                    background: url('../../../assets/images/nx/icon_time_line.png') no-repeat;
                    background-size: 100% 100%;
                  }

                  .imgIDataStyle {
                    background: url('../../../assets/images/nx/icon_money.png') no-repeat;
                    background-size: 100% 100%;
                  }

                  .imgJDataStyle {
                    background: url('../../../assets/images/nx/icon_unit.png') no-repeat;
                    background-size: 100% 100%;
                  }

                  .dataBBTextStyle {
                    height: 20px;
                    line-height: 20px;

                    .span-text {
                      margin-left: 8px;
                    }
                  }
                }

                .tagStyle {
                  padding: 2px 4px;
                  border-radius: 5px;
                }

                .tagLeft {
                  color: blue !important;
                }

                .tagRight {
                  color: orange !important;
                }
              }

              .dataTopStyle {
                margin-top: 7px;
              }

              .dataLeftStyle {
                margin-left: 38px;
              }
            }


          }

        }

      }

      .cardVanPullRefresh1 {
        min-height: 100%;

        .dataStyle {
          //height: 260px;
          height: auto;
          margin: 10px;
          background-color: #FFFFFF;
          border-radius: 10px;

          .upMainStyle {

            .textMainStyle {
              height: 100%;

              .dataAStyle {
                width: 100%;
                height: 40px;
                display: flex;
                align-items: center;

                .dataAAStyle {
                  border-top-right-radius: 10px;
                  border-bottom-right-radius: 10px;
                  height: 25px;
                  line-height: 25px;
                  background-color: rgba(128, 128, 128, 0.23);
                  width: auto;

                  span {
                    margin-left: 15px;
                    margin-right: 15px;
                  }
                }
              }

              .dataBStyle {
                //padding: 0px 15px 0px 15px;
                height: 20px;

                .dataBBStyle {
                  //margin-left: 15px;
                  height: 100%;

                  .dataImgStyle {
                    float: left;
                    height: 19px;
                    width: 15px;
                    text-align: center;
                  }

                  .imgADataStyle {
                    background: url('../../../assets/images/nx/icon_device_name.png') no-repeat;
                    background-size: 100% 100%;
                  }

                  .imgBDataStyle {
                    background: url('../../../assets/images/nx/icon_device_model.png') no-repeat;
                    background-size: 100% 100%;
                  }

                  .imgCDataStyle {
                    background: url('../../../assets/images/nx/icon_device_location.png') no-repeat;
                    background-size: 100% 100%;
                  }


                  .imgDDataStyle {
                    background: url('../../../assets/images/nx/icon_provider.png') no-repeat;
                    background-size: 100% 100%;
                  }

                  .imgEDataStyle {
                    background: url('../../../assets/images/nx/icon_company.png') no-repeat;
                    background-size: 100% 100%;
                  }

                  .imgFDataStyle {
                    background: url('../../../assets/images/nx/icon_device_category.png') no-repeat;
                    background-size: 100% 100%;
                  }

                  .imgGDataStyle {
                    background: url('../../../assets/images/nx/icon_plan_time.png') no-repeat;
                    background-size: 100% 100%;
                  }

                  .imgHDataStyle {
                    background: url('../../../assets/images/nx/icon_time_line.png') no-repeat;
                    background-size: 100% 100%;
                  }

                  .imgIDataStyle {
                    background: url('../../../assets/images/nx/icon_money.png') no-repeat;
                    background-size: 100% 100%;
                  }

                  .imgJDataStyle {
                    background: url('../../../assets/images/nx/icon_unit.png') no-repeat;
                    background-size: 100% 100%;
                  }

                  .dataBBTextStyle {
                    height: 20px;
                    line-height: 20px;

                    .span-text {
                      margin-left: 8px;
                    }
                  }
                }

                .tagStyle {
                  padding: 2px 4px;
                  border-radius: 5px;
                }

                .tagLeft {
                  color: blue !important;
                }

                .tagRight {
                  color: orange !important;
                }
              }

              .dataTopStyle {
                margin-top: 7px;
              }

              .dataLeftStyle {
                margin-left: 38px;
              }
            }


          }

          //.peoplePicDefaultStyle {
          //  width: 60%;
          //  height: 60%;
          //  margin: 20%;
          //  text-align: center;
          //  background: url('../../../assets/images/nx/icon_staff.png') no-repeat;
          //  background-size: 100% 100%;
          //}
          //
          //.picMainStyle {
          //  width: 20%;
          //  float: left;
          //  height: 100%;
          //}
          //
          //.textMainStyle {
          //  width: 80%;
          //  float: right;
          //  height: 100%;
          //  justify-content: space-around;
          //  align-items: flex-start;
          //  display: flex;
          //  flex-wrap: nowrap;
          //  flex-direction: column;
          //
          //  .tagStyle {
          //    padding: 2px 4px;
          //    border-radius: 5px;
          //  }
          //
          //  .tagLeft {
          //    color: blue !important;
          //  }
          //
          //  .tagMid {
          //    color: orange !important;
          //  }
          //
          //  .tagRight {
          //    color: gray !important;
          //  }
          //}
        }

        .custom-image {
          height: 100%;
        }
      }

      .cardVanPullRefresh2 {
        height: 100%;

        .custom-image {
          height: 100%;
        }
      }
    }

  }


  //右侧栏
  .rightBar {
    background-color: #f4f4f4;

    .mainPopupStyle {
      padding: 10px;

      .typeStyle {
        font-size: 19px;
        font-weight: bold;
      }

      .typeStyleA {
        width: 5px;
        height: 27px;
        float: left;
        background-color: #0ca8add4;
      }

      .typeStyleB {
        margin-left: 10px;
        margin-top: 20px
      }

      .checkstyle {
        width: 100%;

        .vanCheckboxGroupStyle {
          width: 100%;
          height: 60px;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .buttonStyle {

            .vanButtonStyle {
              background-color: #0ca8ad4f;
              border-radius: 5px;
              height: 35px;

              span {
                color: gray;
              }
            }

            .vanButtonStyleA {
              border-radius: 5px;
              border: 1px solid gray !important;
              height: 35px;

              span {
                color: gray;
              }
            }
          }

        }

        /deep/ .van-checkbox__icon {
          height: 100%;
        }

        /deep/ .van-cell__value {
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .van-field__body {
            width: 100%;
          }
        }
      }
    }

    .popupStyle {
      height: calc(100% - 67px);

      .listCardPopup {
        height: 100%;
        width: 100%;
        z-index: 999;
        overflow: auto;
        justify-content: flex-start;
        align-items: center;

        .cardVanPullRefreshThree {
          min-height: 100%;

          .dataStyleThree {
            //height: 260px;
            height: auto;
            margin: 10px;
            background-color: #FFFFFF;
            border-radius: 10px;

            .upMainStyleThree {

              .textMainStyleThree {
                height: 100%;

                .pinmThree {
                  padding: 0px 15px 15px 15px;
                  width: 100%;
                  display: flex;
                  flex-direction: column;

                  .dataBStyle {
                    //padding: 0px 15px 0px 15px;
                    height: 20px;

                    .dataBBStyle {
                      //margin-left: 15px;
                      height: 100%;

                      .dataImgStyle {
                        float: left;
                        height: 19px;
                        width: 15px;
                        text-align: center;
                      }

                      .imgADataStyle {
                        background: url('../../../assets/images/nx/icon_device_name.png') no-repeat;
                        background-size: 100% 100%;
                      }

                      .imgBDataStyle {
                        background: url('../../../assets/images/nx/icon_device_model.png') no-repeat;
                        background-size: 100% 100%;
                      }

                      .imgCDataStyle {
                        background: url('../../../assets/images/nx/icon_device_location.png') no-repeat;
                        background-size: 100% 100%;
                      }


                      .imgDDataStyle {
                        background: url('../../../assets/images/nx/icon_provider.png') no-repeat;
                        background-size: 100% 100%;
                      }

                      .imgEDataStyle {
                        background: url('../../../assets/images/nx/icon_company.png') no-repeat;
                        background-size: 100% 100%;
                      }

                      .imgFDataStyle {
                        background: url('../../../assets/images/nx/icon_device_category.png') no-repeat;
                        background-size: 100% 100%;
                      }

                      .imgGDataStyle {
                        background: url('../../../assets/images/nx/icon_plan_time.png') no-repeat;
                        background-size: 100% 100%;
                      }

                      .imgHDataStyle {
                        background: url('../../../assets/images/nx/icon_time_line.png') no-repeat;
                        background-size: 100% 100%;
                      }

                      .imgIDataStyle {
                        background: url('../../../assets/images/nx/icon_money.png') no-repeat;
                        background-size: 100% 100%;
                      }

                      .imgJDataStyle {
                        background: url('../../../assets/images/nx/icon_unit.png') no-repeat;
                        background-size: 100% 100%;
                      }

                      .dataBBTextStyle {
                        height: 20px;
                        line-height: 20px;

                        .span-text {
                          margin-left: 8px;
                        }
                      }
                    }

                    .tagStyle {
                      padding: 2px 4px;
                      border-radius: 5px;
                    }

                    .tagLeft {
                      color: blue !important;
                    }

                    .tagRight {
                      color: orange !important;
                    }
                  }
                }

                .dataAStyle {
                  width: 100%;
                  height: 40px;
                  display: flex;
                  align-items: center;

                  .dataAAStyle {
                    border-top-right-radius: 10px;
                    border-bottom-right-radius: 10px;
                    height: 25px;
                    line-height: 25px;
                    background-color: rgba(128, 128, 128, 0.23);
                    width: auto;

                    span {
                      margin-left: 15px;
                      margin-right: 15px;
                    }
                  }
                }

                .dataBStyle {
                  //padding: 0px 15px 0px 15px;
                  height: 20px;

                  .dataBBStyle {
                    //margin-left: 15px;
                    height: 100%;

                    .dataImgStyle {
                      float: left;
                      height: 19px;
                      width: 15px;
                      text-align: center;
                    }

                    .imgADataStyle {
                      background: url('../../../assets/images/nx/icon_device_name.png') no-repeat;
                      background-size: 100% 100%;
                    }

                    .imgBDataStyle {
                      background: url('../../../assets/images/nx/icon_device_model.png') no-repeat;
                      background-size: 100% 100%;
                    }

                    .imgCDataStyle {
                      background: url('../../../assets/images/nx/icon_device_location.png') no-repeat;
                      background-size: 100% 100%;
                    }


                    .imgDDataStyle {
                      background: url('../../../assets/images/nx/icon_provider.png') no-repeat;
                      background-size: 100% 100%;
                    }

                    .imgEDataStyle {
                      background: url('../../../assets/images/nx/icon_company.png') no-repeat;
                      background-size: 100% 100%;
                    }

                    .imgFDataStyle {
                      background: url('../../../assets/images/nx/icon_device_category.png') no-repeat;
                      background-size: 100% 100%;
                    }

                    .imgGDataStyle {
                      background: url('../../../assets/images/nx/icon_plan_time.png') no-repeat;
                      background-size: 100% 100%;
                    }

                    .imgHDataStyle {
                      background: url('../../../assets/images/nx/icon_time_line.png') no-repeat;
                      background-size: 100% 100%;
                    }

                    .imgIDataStyle {
                      background: url('../../../assets/images/nx/icon_money.png') no-repeat;
                      background-size: 100% 100%;
                    }

                    .imgJDataStyle {
                      background: url('../../../assets/images/nx/icon_unit.png') no-repeat;
                      background-size: 100% 100%;
                    }

                    .dataBBTextStyle {
                      height: 20px;
                      line-height: 20px;

                      .span-text {
                        margin-left: 8px;
                      }
                    }
                  }

                  .tagStyle {
                    padding: 2px 4px;
                    border-radius: 5px;
                  }

                  .tagLeft {
                    color: blue !important;
                  }

                  .tagRight {
                    color: orange !important;
                  }
                }

                .dataTopStyle {
                  margin-top: 7px;
                }

                .dataLeftStyle {
                  margin-left: 38px;
                }
              }


            }

            .upMainStyleFour {
              padding: 15px;
              display: flex;
              flex-direction: column;

              .textMainStyleFour {
                height: 100%;

                .dataBStyle {
                  //padding: 0px 15px 0px 15px;
                  height: 20px;

                  .dataBBStyle {
                    //margin-left: 15px;
                    height: 100%;

                    .dataImgStyle {
                      float: left;
                      height: 19px;
                      width: 15px;
                      text-align: center;
                    }

                    .imgADataStyle {
                      background: url('../../../assets/images/nx/icon_device_name.png') no-repeat;
                      background-size: 100% 100%;
                    }

                    .imgBDataStyle {
                      background: url('../../../assets/images/nx/icon_device_model.png') no-repeat;
                      background-size: 100% 100%;
                    }

                    .imgCDataStyle {
                      background: url('../../../assets/images/nx/icon_device_location.png') no-repeat;
                      background-size: 100% 100%;
                    }


                    .imgDDataStyle {
                      background: url('../../../assets/images/nx/icon_provider.png') no-repeat;
                      background-size: 100% 100%;
                    }

                    .imgEDataStyle {
                      background: url('../../../assets/images/nx/icon_company.png') no-repeat;
                      background-size: 100% 100%;
                    }

                    .imgFDataStyle {
                      background: url('../../../assets/images/nx/icon_device_category.png') no-repeat;
                      background-size: 100% 100%;
                    }

                    .imgGDataStyle {
                      background: url('../../../assets/images/nx/icon_plan_time.png') no-repeat;
                      background-size: 100% 100%;
                    }

                    .imgHDataStyle {
                      background: url('../../../assets/images/nx/icon_time_line.png') no-repeat;
                      background-size: 100% 100%;
                    }

                    .imgIDataStyle {
                      background: url('../../../assets/images/nx/icon_money.png') no-repeat;
                      background-size: 100% 100%;
                    }

                    .imgJDataStyle {
                      background: url('../../../assets/images/nx/icon_unit.png') no-repeat;
                      background-size: 100% 100%;
                    }

                    .dataBBTextStyle {
                      height: 20px;
                      line-height: 20px;

                      .span-text {
                        margin-left: 8px;
                      }
                    }
                  }

                  .tagStyle {
                    padding: 2px 4px;
                    border-radius: 5px;
                  }

                  .tagLeft {
                    color: blue !important;
                  }

                  .tagRight {
                    color: orange !important;
                  }
                }

                .dataAStyle {
                  width: 100%;
                  height: 40px;
                  display: flex;
                  align-items: center;

                  .dataAAStyle {
                    border-top-right-radius: 10px;
                    border-bottom-right-radius: 10px;
                    height: 25px;
                    line-height: 25px;
                    background-color: rgba(128, 128, 128, 0.23);
                    width: auto;

                    span {
                      margin-left: 15px;
                      margin-right: 15px;
                    }
                  }
                }

                .dataBStyle {
                  //padding: 0px 15px 0px 15px;
                  height: 20px;

                  .dataBBStyle {
                    //margin-left: 15px;
                    height: 100%;

                    .dataImgStyle {
                      float: left;
                      height: 19px;
                      width: 15px;
                      text-align: center;
                    }

                    .imgADataStyle {
                      background: url('../../../assets/images/nx/icon_device_name.png') no-repeat;
                      background-size: 100% 100%;
                    }

                    .imgBDataStyle {
                      background: url('../../../assets/images/nx/icon_device_model.png') no-repeat;
                      background-size: 100% 100%;
                    }

                    .imgCDataStyle {
                      background: url('../../../assets/images/nx/icon_device_location.png') no-repeat;
                      background-size: 100% 100%;
                    }


                    .imgDDataStyle {
                      background: url('../../../assets/images/nx/icon_provider.png') no-repeat;
                      background-size: 100% 100%;
                    }

                    .imgEDataStyle {
                      background: url('../../../assets/images/nx/icon_company.png') no-repeat;
                      background-size: 100% 100%;
                    }

                    .imgFDataStyle {
                      background: url('../../../assets/images/nx/icon_device_category.png') no-repeat;
                      background-size: 100% 100%;
                    }

                    .imgGDataStyle {
                      background: url('../../../assets/images/nx/icon_plan_time.png') no-repeat;
                      background-size: 100% 100%;
                    }

                    .imgHDataStyle {
                      background: url('../../../assets/images/nx/icon_time_line.png') no-repeat;
                      background-size: 100% 100%;
                    }

                    .imgIDataStyle {
                      background: url('../../../assets/images/nx/icon_money.png') no-repeat;
                      background-size: 100% 100%;
                    }

                    .imgJDataStyle {
                      background: url('../../../assets/images/nx/icon_unit.png') no-repeat;
                      background-size: 100% 100%;
                    }

                    .dataBBTextStyle {
                      height: 20px;
                      line-height: 20px;

                      .span-text {
                        margin-left: 8px;
                      }
                    }
                  }

                  .tagStyle {
                    padding: 2px 4px;
                    border-radius: 5px;
                  }

                  .tagLeft {
                    color: blue !important;
                  }

                  .tagRight {
                    color: orange !important;
                  }
                }

                .dataTopStyle {
                  margin-top: 7px;
                }

                .dataLeftStyle {
                  margin-left: 38px;
                }
              }


            }
          }

          .custom-image {
            height: 100%;
          }
        }

        .cardVanPullRefresh22 {
          height: 100%;

          .custom-image {
            height: 100%;
          }
        }
      }
    }


  }
}
</style>
